

<script>
import getImageUrl from '@/utils/getImageUrl.js'
import RoomList from '@/views/home/modules/RoomList.vue'
export default {
    name: 'HomeContent',
    components: { RoomList },
    props: {
        homeType: {
            type: Array,
            default: () => ['单人间', '双人间']
        },
        pictureUrl: {
            type: Array,
            deafult: () => ['/img/url1.jpg', '/img/url2.jpg', '/img/url3.jpg']
        }
    },
    data() {
        return {
            footerUrl: "/img/footer.png",
            activeRoomType: '',
        }
    },
    methods: {
        getImageUrl(name) {
            return getImageUrl(name)
        },
        selectRoomType(roomTypeName) {
            this.activeRoomType = roomTypeName
            console.log(this.activeRoomType)
        },

    },
    mounted() {
        this.activeRoomType = this.homeType[0]
    },
    watch: {
        activeRoomType(newVal) {
            this.$emit('selectRoomType', newVal)
        },
    }

}
</script>

<template>
    <div id="home-default">
        <!-- 走马灯 -->
        <el-carousel :interval="4000" height="600px">
            <el-carousel-item v-for="(item, index) in pictureUrl" :key="index">
                <img :src="getImageUrl(item)" alt="" />
            </el-carousel-item>
        </el-carousel>

        <el-menu mode="horizontal" :ellipsis="false" @select="selectRoomType" :default-active="activeRoomType">

            <!-- flex = 1 -->
            <div class="flex-grow" />

            <!-- 根据HeaderMenu来配置 -->
            <el-menu-item v-for="(item, index) in homeType" :key="index" :index="item">
                {{ item }}
            </el-menu-item>

            <!-- flex = 1 -->
            <div class="flex-grow" />
        </el-menu>

        <RoomList ref="roomList" :roomType="activeRoomType" />

        <img :src="getImageUrl(footerUrl)" style="height: 200px !important;" alt="" />

    </div>
</template>


<style scoped lang="scss">
#home-default {
    // background-color: pink;
    width: 100vw;

    img {
        width: 100%;
        height: 600px;
        vertical-align: bottom;
    }


    .flex-grow {
        flex-grow: 1;
    }
}
</style>